<template>
    <div>
        <span class="label">页面二维码：</span>
        <div class="qrcode" ref="QRcode"></div>
    </div>
</template>
<script>
    import QRCode from 'qrcodejs2'
    export default {
        props: ['url'],
        data() {
            return {
                linkUrl:''
            }
        },
        created() {
        },
        methods: {
            /*生成二维码*/
            creatQrCode() {
                console.log(this.url)
                //清空之前的二维码 否则会生成多个
                this.$refs.QRcode.innerHTML = '';
                new QRCode(this.$refs.QRcode, {
                    text: this.linkUrl, // 需要转换为二维码的内容
                    width: 100,
                    height: 100,
                    colorDark: '#000000',
                    colorLight: '#ffffff',
                    correctLevel: QRCode.CorrectLevel.H
                })
            }
        },

        // mounted() {
        //     this.creatQrCode()
        // }
    }

</script>
<style>
    .qrcode{
        display: inline-block;
        margin: 5vh 0vh 0vh 5vh;
        padding: 7px;
        background-color: beige;
    }
    .label{
        bottom: 10vh;
        position: relative;
    }
</style>